<template>
  <div class="login-box-scond">
    <div class="login-title">免费领取-试听课程/题库</div>
    <div class="login-blank-title">已有{{ personCount }}人参加</div>
    <div class="">
      <div class="login-input mt10">
        <el-input v-model="userName" placeholder="请输入您的称呼"></el-input>
      </div>
      <div class="login-input mt10">
        <el-popover
          placement="bottom"
          :title="tipTitle"
          width="200"
          trigger="manual"
          v-model="isCheckPhone"
        >
          <el-input
            slot="reference"
            v-model="telPhone"
            placeholder="请输入手机号"
            maxlength="11"
            show-word-limit
            @blur="checkPhone"
          ></el-input>
        </el-popover>
      </div>
    </div>
    <div class="login-input mt10">
      <el-input v-model="picCode" placeholder="请输入正确答案" slot="reference">
        <template #suffix>
          <!-- @click="getPicCode"  -->
          <img
            @click="childGetPicCode"
            class="pic-img"
            slot="append"
            :src="'data:image/png;base64,' + picCodeImg"
            alt=""
          />
        </template>
      </el-input>
    </div>
    <div class="login-input mt10">
      <el-popover
        placement="bottom"
        title="请输入验证码"
        width="200"
        trigger="manual"
        v-model="isCheckNumber"
      >
        <el-input v-model="number" placeholder="请输入验证码" slot="reference">
          <template #suffix>
            <el-button
              type="text"
              :disabled="vcodeDisabled"
              @click="getCode(2, telPhone)"
              style="border: none; margin-top: 10px"
            >
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{ text }}</span>
            </el-button>
          </template>
        </el-input>
      </el-popover>
    </div>
    <div class="login-title mt10 ml4">
      <el-button type="primary" class="login-title-button" @click="submitPhone">
        {{ buttonTitle }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { getPicCode, getBaiduPicCode, submitBaiduPhone } from '@/api/login'
export default {
  props: {
    buttonTitle: { type: String, default: '' },
    auth_token: { type: String, default: '' },
    picCodeImg: { type: String, default: '' }
  },
  data() {
    return {
      userName: '',
      telPhone: '',
      number: '',
      // 电话号码校验
      isCheckPhone: false,
      isPhoneTrue: false,
      isCheckNumber: false,
      tipTitle: '',
      show: true,
      text: '60秒以后获取',
      //发送验证码定时器
      codeTimer: null,
      //发送验证码间隔
      codeSecond: 60,
      personCount: 44401,
      // 图形验证码
      picCode: '',
      // // 图形验证码图片
      // picCodeImg: '',
      // // 图形验证码token
      // auth_token: '',
      // 控制图形验证码请求
      getPicCodeFlag: false,
      vcodeDisabled: false
    }
  },
  methods: {
    // 检查电话号码
    checkPhone() {
      let phone = this.telPhone
      if (!(phone && /^1[3456789]\d{9}$/.test(phone))) {
        this.isCheckPhone = true
        if (!phone) {
          this.tipTitle = '请输入电话号码'
        } else {
          this.tipTitle = '请输入正确的号码'
        }
      } else {
        this.isCheckPhone = false
      }
    },
    async getCode() {
      if (this.telPhone === '') {
        this.$message({ type: 'warning', message: '请输入手机号' })
        return
      }
      if (!/^1[3456789]\d{9}$/.test(this.telPhone)) {
        this.$message({ type: 'warning', message: '手机号码有误，请重新输入' })
        return
      }

      this.number = ''
      // 清空定时器
      if (this.codeTimer) {
        clearInterval(this.codeTimer)
        this.codeTimer = null
      }
      let str = {
        tel: this.telPhone,
        verification_code: this.picCode
      }
      let strs = JSON.stringify(str)
      let encrypt = btoa(btoa(strs))
      let params = {
        sign: encrypt
      }
      let { errcode, errmsg } = await getBaiduPicCode(params)
      if (errcode !== 0) {
        this.$message({ type: 'warning', message: errmsg })
        // this.clearCodeTimer()
        return
      } else {
        this.show = false
        this.vcodeDisabled = true
        this.codeTimer = setInterval(() => {
          this.codeSecond--
          if (this.codeSecond > 0) {
            this.text = `${this.codeSecond}秒以后获取`
          } else {
            this.clearCodeTimer()
          }
        }, 1000)
        this.$message({
          type: 'success',
          message: '验证码已发送，请注意查收！'
        })
      }
    },
    // 手机号确认登录
    async submitPhone() {
      // 手机号进行两侧base64加密
      if (!this.userName) {
        this.$message({ type: 'warning', message: '请输入昵称' })
        return
      }
      if (!this.telPhone || !/^1[3456789]\d{9}$/.test(this.telPhone)) {
        this.$message({ type: 'warning', message: '请输入正确的电话号码' })
        return
      }
      if (!this.number) {
        this.$message({ type: 'warning', message: '请填写验证码' })
        return
      }
      let params = {
        tel: this.telPhone,
        user_name: encodeURIComponent(this.userName),
        sms_code: this.number
      }
      let data = JSON.stringify(params)
      let datas = btoa(btoa(data))
      let { errcode, errmsg } = await submitBaiduPhone({ sign: datas })
      if (errcode !== 0) {
        this.$message({ type: 'warning', message: errmsg })
      } else {
        this.telPhone = ''
        this.userName = ''
        this.number = ''
        this.picCode = ''
        this.$message({
          type: 'success',
          message: '申请成功，注意接听老师电话！',
          duration: 5000
        })
      }
    },
    // 清除倒计时，回复按钮
    clearCodeTimer() {
      clearInterval(this.codeTimer)
      this.codeTimer = null
      this.vcodeDisabled = false
      this.show = false
      this.codeSecond = 60
      this.text = '60秒以后获取'
    },
    childGetPicCode() {
      this.$emit('watchGetPicCode')
    }
  },
  mounted() {
    this.dynamicLoadJs(
      '//image.zlketang.com/public/news/js/jsencrypt.min.js',
      'jsencryptMin'
    )
    // this.storage.init()
    // this.init()
    // // 之拿一次图形验证码  后续切换登录方式，手动点击图形验证码调用
    // this.getPicCode()
  }
}
</script>

<style scoped>
.login-box-scond {
  width: 100%;
  margin: auto;
  /* padding: 40px; */
}

.login-title {
  width: 100%;
  margin: 0 auto 10px;
  font-size: 30px;
  text-align: center;
}

.login-blank-title {
  width: 100%;
  margin: 0 auto 20px;
  text-align: center;
  color: #999;
}

.login-input {
  color: #999;
  margin-left: 10px;
  position: relative;
}

.login-box-scond /deep/ .el-input__inner {
  border: none;
  background: #f5f5f5;
  color: #333;
  width: 390px;
  height: 60px;
  font-size: 16px;
}

.login-title-button {
  width: 390px;
  height: 60px;
  font-size: 18px;
  align-items: center;
}

.pic-img {
  cursor: pointer;
  width: 80px;
  height: 30px;
  margin-top: 13px;
}

.mt10 {
  margin-top: 10px;
}

.ml4 {
  margin-left: 6px;
}
</style>
